const echarts = require('echarts')
export function getSecurityRankChartOption(data: any) {
  // const data = [
  //   {
  //     name: '白马公交',
  //     value: 1260,
  //     label: {
  //       show: true,
  //       position: 'right', // 位置
  //       color: '#030F2A',
  //       fontSize: 14,
  //       fontFamily: 'PingFang Regular',
  //       distance: 15, // 距离
  //       backgroundColor: '#01D6FD',
  //       padding: 5,
  //       borderRadius: 3,
  //       fontWeight: 'bold'
  //     } // 柱子上方的数值
  //   },
  //   {
  //     name: '超大公交',
  //     value: 927
  //   },
  //   {
  //     name: '中巴公交',
  //     value: 859
  //   },
  //   {
  //     name: '德运公交',
  //     value: 765
  //   },
  //   {
  //     name: '诚运鑫公交',
  //     value: 478
  //   }
  // ]
  const getArrByKey = (data: any, k: any) => {
    const key = k || 'value'
    const res: any = []
    if (data) {
      data.forEach(function(t: any) {
        res.push(t[key])
      })
    }
    return res // ["桂林", "柳州", "北海", "防城巷", "百色"]
  }
  const getSymbolData = (data: any) => {
    const arr = []
    for (let i = 0; i < data.length; i++) {
      arr.push({
        value: data[i].value,
        symbolPosition: 'start'
      })
    }
    return arr // [{value:10,symbolPosition:'end'}]
  }
  // console.log(getSymbolData(data));
  return {
    tooltip: {
      backgroundColor: 'rgba(255,255,255, 0)',
      borderColor: 'rgba(255,255,255, 0)',
      // show: false
      formatter: (params: any) => {
        let html = ''
        if (params.seriesIndex === 1) {
          /* eslint-disable */
          return (html += `<span
            style='display:block; width:110px; height:26px; line-height: 23px; background: linear-gradient(to right, #22B3F0 0%,#0D4BC9 100%); color:#fff;fontWeight:500; fontFamily:PingFang Regular; fontSize:16px; border-radius: 13px;padding: 0 9px'>
            ${params.name} : ${params.value}
            </span>`)
        } else {
          return ''
        }
      }
    },
    grid: {
      top: '2%',
      bottom: 0,
      right: 24,
      left: -20,
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data, 'name'),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },

        axisLabel: {
          show: true,
          interval: 0,
          color: '#fff',
          align: 'right',
          margin: 60,
          formatter: function(value: any) {
            return '{title|' + value + '}'
          },
          rich: {
            title: {
              width: 50,
              align: 'left',
              fontSize: 18,
              fontFamily: 'PingFang Regular'
            }
          }
        }
      }
    ],
    series: [
      {
        name: '', // 发光的⭕️
        type: 'pictorialBar',
        symbol:
          'image://',
        symbolSize: [12, 18],
        symbolOffset: [-10, 0],
        z: 12,
        itemStyle: {
          normal: {
            color: '#fff'
          }
        },
        data: getSymbolData(data)
      },
      {
        name: '条',
        type: 'bar',
        showBackground: true,
        // barBorderRadius: 30,
        yAxisIndex: 0,
        data: data,
        barWidth: 14,
        // align: left,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: 'rgba(25,63,128,0)'
                },
                {
                  offset: 0.2,
                  color: 'rgba(3,54,255,0.6)'
                },
                {
                  offset: 0.7,
                  color: 'rgba(1,180,255,0.9)'
                }
              ],
              false
            ), // 渐变
            barBorderRadius: 5
          }
        },
        backgroundStyle: {
          color: '#193F80',
          borderRadius: 6
        }
      }
    ]
  }
}
